import React, {Component} from 'react';
import "./index.less"
import {Avatar, Button, Form, Input, message, Radio, Select, Modal, Upload, Space} from 'antd';
import {AxioInstance} from "../../api/AxiosHelper";
import {
    BIND_CHECK, SERVER_PICTURE_URL, UPDATE_USER_MESSAGE
} from "../../api/APIURLDefine";
import {FormInstance} from "antd/es/form";
import {withRouter} from 'react-router-dom';
import {inject, observer} from "mobx-react";
import Axios from "axios";
import store from "../../stores"
import {FormOutlined} from "@ant-design/icons/lib";
import UserUpdateModel from '../../components/UserUpdateModel';
import moment from 'moment';
import {CheckUserHasAvatar} from "../../utils/Utils";
// import Modal from 'antd/lib/modal';

const layout = {
    labelCol: {span: 8},
    wrapperCol: {span: 16},
};
const {Option} = Select;

const uploadProps = {
    action: '/api/utils/v1/upload',
    multiple: false,
    data: {},
    onStart(file) {
        console.log('onStart', file, file.name);
    },
    onSuccess(ret, file) {
        console.log('onSuccess', ret, file.name);
        const path = ret.data;
        let form: any = {};
        form.avatarUrl = path;
        AxioInstance.post(`${UPDATE_USER_MESSAGE}`, form).then((data) => {
            store.userStore.setToken();
        }).catch((e) => {
            console.error(e);
            store.userStore.setToken();
        })
    },
    onError(err) {
        console.log('onError', err);
    },
    onProgress({percent}, file) {
        console.log('onProgress', `${percent}%`, file.name);
    },
    customRequest({
                      action,
                      data,
                      file,
                      filename,
                      headers,
                      onError,
                      onProgress,
                      onSuccess,
                      withCredentials,
                  }) {
        // EXAMPLE: post form-data with 'axios'
        // eslint-disable-next-line no-undef
        const formData = new FormData();
        formData.append('filename', file);
        formData.append('type', '1');
        // formData.append(filename, file);
        Axios
            .post(action, formData, {
                // withCredentials,
                // headers,
                onUploadProgress: ({total, loaded}) => {
                    onProgress({percent: Math.round((loaded / total) * 100).toFixed(2)}, file);
                },
            })
            .then(({data: response}) => {
                onSuccess(response, file);
            })
            .catch(onError);

        return {
            abort() {
                console.log('upload progress is aborted.');
            },
        };
    },
};

// @ts-ignore
@withRouter
@inject("globalStore", "userStore")
@observer
class ViewMessage extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            trueName: "",
            name: "",
            _class: "",
            description: "",
            titles: "",
            studentId: "",
            teacherId: '',
            modelVisible: false,
            modelName: '',
            phoneNumber: '',
            email: '',
            password: '',
        }
    }

    componentDidMount() {
        AxioInstance.get(`${BIND_CHECK}`).then((data: any) => {
            this.setState({
                value: !data.teacherId ? 1 : 2,
                name: data.name,
                trueName: data.trueName,
                teacherId: data.teacherId,
                studentId: data.studentId,
                description: data.description,
                titles: data.titles,
                _class: data._class

            });
        }).catch((e) => {
            console.error("未进行身份绑定");
        });
        this.props.globalStore.SetShowSearch(false);
    }

    componentWillUnmount() {
        this.props.globalStore.SetShowSearch(true);
    }

    formInstance: FormInstance = null

    closeModel = () => {
        this.setState({modelVisible: false})
    }

    //自定义上传方法
    render() {
        const self = this.state;
        const user = this.props.userStore.userInfo;
        if (user) {
            CheckUserHasAvatar();
        }

        const add = user?.additionalData;
        return (
            <div className="auth-background">
                <UserUpdateModel
                    visible={this.state.modelVisible}
                    title={this.state.modelName}
                    closeModel={this.closeModel}
                >
                </UserUpdateModel>
                <div className="auth-body">
                    <div className="auth-Information">
                        <div className="auth-information-header">
                            <Space>
                                基本信息
                            </Space>
                        </div>
                        <div>
                            <div className="auth-info-body">
                                <div style={{
                                    width: "100%",
                                    height: "100%",
                                    display: "flex",
                                    justifyContent: "flex-start"
                                }}>
                                    <div style={{width: "2.4rem", height: "100%"}}>
                                        {/* <img style={{ width: "2.4rem", height: "2.4rem", alignItems: "center" }} src={""} /> */}
                                        <Upload
                                            accept=".jpg,.png"
                                            {...uploadProps}
                                        >
                                            <div className="avatar-back">
                                                <div className="avatar-container">
                                                    <img
                                                        className="avatar-img"
                                                        style={{
                                                            width: "2.4rem",
                                                            height: "2.4rem",
                                                            alignItems: "center"
                                                        }}
                                                        src={user !== null && user.avatarUrl ? SERVER_PICTURE_URL + `${user.avatarUrl}` : SERVER_PICTURE_URL + "images/defaultAvatar.png"}
                                                        alt={""}/>
                                                </div>
                                            </div>
                                        </Upload>
                                    </div>
                                    <div className="view-message">
                                        <div>
                                            姓名: &emsp;{user?.name}
                                        </div>
                                        <div>
                                            性别: &emsp;{user?.gender || "保密"}
                                        </div>
                                        <div style={{height: "0.9rem"}}>
                                            简介: &emsp;{self.description || "没有留下内容"}
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div className="auth-info-foot">
                                <div className="auth-foot-header">
                                    账号信息
                                </div>
                                <div className="auth-information-row">
                                    {/* <div className='auth-information-row-item'>
                                        <div className='auth-information-row-item-child'>
                                            <div style={{fontSize: '0.2rem'}}>手机号:</div>
                                            <div className='auth-information-box'>{user?.phone}</div>
                                        </div>
                                        <span className="OnClickText" onClick={() => {
                                            this.setState({modelVisible: true, modelName: '绑定手机'})
                                        }}>绑定手机</span>
                                    </div>
                                    <div className='auth-information-row-item'>
                                        <div className='auth-information-row-item-child'>
                                            <div style={{fontSize: '0.2rem'}}>Email:</div>
                                            <div className='auth-information-box'>{user?.email}</div>
                                        </div>
                                        <span className='OnClickText' onClick={() => {
                                            this.setState({modelVisible: true, modelName: '绑定邮箱'})
                                        }}>绑定邮箱</span>
                                    </div>*/}
                                    <div className='auth-information-row-item'>
                                        <div className='auth-information-row-item-child'>
                                            <div style={{fontSize: '0.2rem', marginRight: "0.2rem"}}>修改密码:</div>
                                            <div className='auth-information-box'>*****************</div>
                                        </div>
                                        <a className="OnClickText" onClick={() => {
                                            this.setState({modelVisible: true, modelName: '修改密码'})
                                        }}>修改密码</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div className="auth-userCard">
                        <div className="auth-userCard-header"> 认证信息</div>
                        <div className='auth-userCard-body'>
                            <div className='auth-userCard-body-item'>
                                <span className="auth-userCard-body-item-key">身份</span>
                                <span>{add ? (self.value === 1 ? "学生" : "教师") : "未认证"}</span>
                            </div>
                            <div className="auth-userCard-body-item">
                                <span className="auth-userCard-body-item-key">{self.value === 1 ? "学号" : "工号"}</span>
                                <span>{self?.teacherId || self?.studentId || "未认证"}</span>
                            </div>

                            <>
                                {

                                    self.value === 1 ? <>
                                        <div className='auth-userCard-body-item'>
                                            <span className="auth-userCard-body-item-key">学校</span>
                                            <span>{add ? add?.school?.name : "未认证"}</span>
                                        </div>
                                        <div className='auth-userCard-body-item'>
                                            <span className="auth-userCard-body-item-key">学院</span>
                                            <span>{add ? add?.college?.name : "未认证"}</span>
                                        </div>
                                        <div className='auth-userCard-body-item'>
                                            <span className="auth-userCard-body-item-key">年级</span>
                                            <span>{add ? add?.grade : "未认证"}</span>
                                        </div>
                                    </> : <div></div>
                                }
                            </>

                        </div>
                    </div>
                </div>
            </div>
        );
    }


}

export default ViewMessage;
